<script setup lang="ts">
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
import { ref } from "vue"
import { getTouristRecommendAPI } from '@/services/taglist'
import { onLoad } from '@dcloudio/uni-app'

const touristRecommend = ref<any>([])

const getTouristRecommendData = async () => {
    const res = await getTouristRecommendAPI()
    touristRecommend.value = res.data
    console.log(res.data)
}

onLoad(async () => {
    await getTouristRecommendData()
})
<<<<<<< HEAD


// 搜索本地存储实现
import { ref, reactive, nextTick } from "vue"
import { storeToRefs } from "pinia"
import ToDoList from "@/stores/modules/input"
const todoListStore = ToDoList()
const { todoListArr } = storeToRefs(todoListStore)
const checkedToDo = ref([])
const checkAllFlag = ref(false)
const todoRef = ref()
let input = ref("")
const refInput = ref()

const addToDo = () => {
    todoListStore.addToDo({ name: input.value, flag: false })
    input.value = ""
}

const checkAll = () => {
    if (checkAllFlag.value) checkedToDo.value = []
    else checkedToDo.value = todoListArr.value.map((item) => item.name)
}
const updateToDo = async (item, e) => {
    item.flag = true
    await nextTick()
    refInput.value[0].focus()
}
const deleteToDo = async (item) => {
    await deleteWarning("是否删除该 ToDo")
    todoListStore.deleteToDo(item)
}
const inputBlur = (item, e) => {
    item.flag = false
}
const deleteBatch = async () => {
    await deleteWarning("是否批量删除 ToDo")
    todoListStore.deleteToDoBatch(checkedToDo)
}
const deleteWarning = (info) => {
}
=======
>>>>>>> b63644e8125a50cea4db6ef3a60c700862583928
</script>

<template>
    <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
<<<<<<< HEAD
        <div style="width: 416px">
            <div class="header">
                <input v-model="input" placeholder="五一冷门景点" style="width: 318px" size="small" ref="todoRef"
                    class="search" @keyup.enter="addToDo" />
                <button @click="addToDo" :disabled="input ? false : true">搜索</button>
            </div>
            <view class="search-history">
                <view class="list">历史记录</view>
                <view class="list" @click="deleteToDo(item)">删除</view>
            </view>
            <view class="recommend">
                <view v-for="(item, index) in todoListArr" :key="index" class="tag">{{ item.name }}</view>
            </view>
        </div>
        <!-- <div class="to_do_list">
                <div class="to_do_list_item" v-for="(item, index) in todoListArr" :key="index">
                    <view :label="item.name"><span v-if="!item.flag">{{ item.name }}</span><el-input size="small" v-else
                            ref="refInput" v-model="item.name" :autofocus="true"
                            @blur="inputBlur(item, $event)"></el-input>
                    </view>
                    <div>
                        <button style="margin: 3px" @click="deleteToDo(item)">删除</button>
                    </div>
                </div>
            </div> -->
        <!-- <view class="search">
=======
        <view class="search">
>>>>>>> b63644e8125a50cea4db6ef3a60c700862583928
            <view class="uni-form-item uni-column">
                <view class="uni-input-wrapper">
                    <input class="uni-input" placeholder="五一冷门景点" :value="inputValue" @input="InputChange" />
                    <text class="uni-icon" v-if="showClearIcon" @click="clearIcon">&#xe434;</text>
                </view>
            </view>
            <view>搜索</view>
<<<<<<< HEAD
        </view> -->
    </view>
    <view class="divider"></view>
    <!-- <view class="recommend">
        <view v-for="item in 4" :key="item" class="tag">旅游推荐</view>
    </view> -->
=======
        </view>
    </view>
    <view class="divider"></view>
    <view class="search-history">
        <view class="list">历史记录</view>
        <view class="list">删除</view>
    </view>
    <view class="recommend">
        <view v-for="item in 4" :key="item" class="tag">旅游推荐</view>
    </view>
>>>>>>> b63644e8125a50cea4db6ef3a60c700862583928
    <view class="guess">
        <navigator class="guess-item" v-for="(item, index) in touristRecommend" :key="index"
            :url="`/pages/item/item?id=${item.id}`">
            <image class="image" mode="aspectFill" :src="item.img"></image>
            <view class="name">{{ item.scenicName }}</view>
            <view class="price">
                <image class="images" mode="aspectFill" :src="item.user.img"></image>
                <text class="small">{{ item.user.nickname }}</text>
                <text class="right">{{ item.avgExpenses }}</text>
            </view>
        </navigator>
    </view>
</template>

<style lang="scss">
<<<<<<< HEAD
.header {
    display: flex;
    justify-content: space-around;
    text-align: center;

    .search {
        display: flex;
        background-color: #ccc;
        text-align: center;
        height: 100%;
        border-radius: 30px;
        border: 0px solid #000;
        padding: 20rpx;
        border-radius: 5px;
        background-color: #ccc;
    }
}

.search {
    display: flex;
    justify-content: space-around;
    // margin-top: 20px;

    .uni-input {
        border: 0px solid #000;
        padding: 20rpx;
        border-radius: 5px;
        background-color: #ccc;
    }
}

.to_do_list {
    border: 1px solid #ccc;
    width: 416px;
    border-radius: 4px;
    margin-top: 8px;

    .to_do_list_item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 8px;
        padding: 8px 0;
        border-bottom: 1px solid rgb(242, 241, 241);

        &:last-child {
            border: 0;
        }
    }

    .delete-batch {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 8px;
        border-bottom: 1px solid rgb(219, 214, 214);
    }
}

=======
>>>>>>> b63644e8125a50cea4db6ef3a60c700862583928
.search {
    display: flex;
    justify-content: space-around;
    // margin-top: 20px;

    .uni-input {
        border: 0px solid #000;
        padding: 20rpx;
        border-radius: 5px;
        background-color: #ccc;
    }
}

.divider {
    background: #E0E3DA;
    width: 100%;
    height: 3rpx;
    margin-top: 15px;
}

.search-history {
    display: flex;
    justify-content: space-between;
    margin: 10px 30px 0px 30px;
    font-weight: bold;

    .list {
        display: flex;
    }
}

.list {
    margin-top: 20rpx;
}

.recommend {
    display: flex;
    flex-wrap: wrap;
    margin-top: 8px;

    .tag {
        display: flex;
        border-radius: 40rpx;
        border: 1px solid #ccc;
        padding: 8px;
        margin-top: 10px;
        margin-left: 10px;
        height: 35px;
    }
}

.lists {
    .tag {
        border: 0px;
        width: 47%;
        margin-top: 5px;
    }
}

.guess {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20rpx;

    .guess-item {
        width: 345rpx;
        padding: 24rpx 20rpx 20rpx;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        overflow: hidden;
        background-color: #fff;
    }

    .image {
        width: 304rpx;
        height: 304rpx;
    }

    .images {
        width: 60rpx;
        height: 60rpx;
        border-radius: 100%;
    }

    .name {
        height: 40rpx;
        margin: 10rpx 0;
        font-size: 26rpx;
        color: #262626;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .price {
        line-height: 1;
        padding-top: 4rpx;
        color: #000;
        font-size: 26rpx;
    }

    .small {
        font-size: 80%;
        margin-left: 10rpx;
    }

    .right {
        float: right;
        margin-top: 10rpx
    }
}
</style>
